<template>
  <el-dialog
    v-dialogDrag
    top="5vh"
    :before-close="dialogClose"
    :title="dialogTitle"
    :visible="isShow"
    destroy-on-close
  >
    <!--//!  form -->
    <div class="dialog-form">
      <el-form
        ref="subform"
        label-position="right"
        label-width="100px"
        :model="formTemper"
        :rules="rules"
      >
        <el-form-item label="AppName" prop="appName">
          <el-select v-model="formTemper.appName" placeholder="请选择AppName">
            <el-option label="datax-executor" value="datax-executor" />
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="title">
          <el-input v-model="formTemper.title" />
        </el-form-item>
        <el-form-item label="机器地址" prop="addressList">
          <el-input v-model="formTemper.addressList" />
        </el-form-item>
      </el-form>
    </div>
    <!--//!  form -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogClose">取 消</el-button>
      <el-button
        :loading="uploading"
        type="primary"
        @click="submitForm"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
import {
  Message
} from 'element-ui';

const formTemper = {
  appName: '',
  title: '',
  addressList: ''
};

const checkAdress = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('机器地址不能为空'));
  }
  setTimeout(() => {
    const flag = /^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]).){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])(?::(?:[0-9]|[1-9][0-9]{1,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5]))?$/.test(value);
    if (flag) {
      callback();
    } else {
      callback(new Error('请输入正确的机器地址,例如 10.10.10.35'));
    }
  }, 200);
};
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    uploading: {
      type: Boolean,
      default: false
    },
    rowNow: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formTemper: { ...formTemper },
      rules: {
        appName: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        title: [
          { required: true, message: ' ', trigger: 'blur' }
        ],
        addressList: [
          { required: true, validator: checkAdress, trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    isAdd() {
      return Object.keys(this.rowNow).length === 0;
    },
    dialogTitle() {
      return this.isAdd ? '添加执行器' : '编辑执行器';
    }
  },
  watch: {
    isShow: {
      handler: function(v) {
        if (v && !this.isAdd) {
          this.formTemper = {
            ...this.rowNow
          };
        } else {
          this.formTemper = { ...formTemper };
        }
      }
    }
  },
  methods: {
    dialogClose() {
      this.$emit('dialogClose');
    },
    submitForm() {
      this.$refs.subform.validate((valid) => {
        if (valid) {
          this.$emit('dialogDeal', {
            row: this.formTemper,
            type: this.isAdd ? 'add' : 'edit'
          });
        } else {
          Message.error('请正确填写数据');
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
  .dialog-form {
    display: grid;
    grid-template-columns: 1fr .4fr;
  }
  // /deep/ * {
  //  .el-form {
  //  }
  // }
</style>
